<template>
  <div class="information-setting">
    <van-nav-bar title="消息设置" left-arrow @click-left="$emit('close')">
    </van-nav-bar>
    <div class="Panel-top">
        <div class="Panel">
          <div class="title"><h2>互动消息</h2></div>
          <van-cell title="评论和" value="所有人" is-link />
          <van-cell title="新增粉丝" value="所有人" is-link />
          <van-cell title="点赞" value="所有人" is-link />
          <van-cell title="@我" value="所有人" is-link />
        </div>
      </div>
      <div class="Panel-top">
        <div class="Panel">
          <div class="title"><h2>私信消息</h2></div>
          <van-cell title="谁可以私信我" value="默认" is-link />
          <van-cell title="陌生人消息" value="聚合消息" is-link />
        </div>
      </div>
      <div class="Panel-top">
        <div class="Panel">
          <div class="title"><h2>其他消息</h2></div>
          <van-cell title="问答" value="新回答与所有回答邀请" is-link />
          <van-cell title="专栏" >
            <template #right-icon>
              <van-switch v-model="checked" size="20px"/>
            </template>
          </van-cell>
          <van-cell title="圈子" >
            <template #right-icon>
              <van-switch v-model="checked" size="20px"/>
            </template>
          </van-cell>
          <van-cell title="话题邀请" >
            <template #right-icon>
              <van-switch v-model="checked" size="20px"/>
            </template>
          </van-cell>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'information-setting',
  components: {},
  data () {
    return {
      checked: true
    }
  },
  created () {},
  methods: {}
}
</script>
<style lang="scss" scoped>
.information-setting {
  box-sizing: border-box;
  // height: 100vh;
  background-color: rgb(246, 246, 246);
}

.Panel {
  // padding:10px;
  overflow: hidden;
  border-radius: 6px;
  // background-color:#fff;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 10px 15px;
    h2 {
      margin: 0;
      color: #bebec4;
      font-size: 14px;
      font-weight: 400;
    }
  }
}
</style>
